<template>
  <Dialog :title="t('instance.differenceSelection.title')" v-model="dialogVisible" width="1000px">
    <div class="flex items-center justify-end mb-10px">
      <!-- 批量设置 -->
      <el-button type="primary" plain @click="handleBatch" :disabled="selectList.length === 0">
        <Icon icon="ep:finished" class="mr-5px" />
        {{ t('instance.differenceSelection.batchButton') }}
      </el-button>
      <!-- 导入差额评选名单 -->
      <el-button type="success" plain @click="handleImport" :disabled="!queryParams.awardsId">
        <Icon icon="ep:upload" class="mr-5px" />
        {{ t('instance.differenceSelection.importButton') }}
      </el-button>
    </div>
    <vxe-table
      id="iDifferenceSelection-table"
      ref="tableRef"
      v-loading="loading"
      :data="list"
      stripe
      :row-config="{ keyField: 'id' }"
      :custom-config="vxeTableConfig"
      :column-config="{ resizable: true }"
      :size="vxeTableSize"
      :checkbox-config="checkBoxConfig"
      @checkbox-all="collectSelect"
      @checkbox-change="collectSelect"
    >
      <vxe-column type="checkbox" width="50" align="center" fixed="left" />
      <vxe-column
        :title="t('candidate.fields.jobCode')"
        field="jobCode"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
      />
      <vxe-column
        :title="t('candidate.fields.studentName')"
        field="studentName"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
      />
      <vxe-column
        :title="t('candidate.fields.major')"
        field="major"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
      />
      <vxe-column
        :title="t('instance.differenceSelection.result')"
        field="differenceSelection"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
      >
        <template #default="{ row }">
          <el-tag size="small">{{ t(`common.${row.differenceSelection ? 'yes' : 'no'}`) }}</el-tag>
        </template>
      </vxe-column>
      <vxe-column
        :title="t('judgeScene.initial.isWin')"
        field="isWin"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
      >
        <template #default="{ row }">
          <el-tag size="small">{{ t(`common.${row.isWin ? 'yes' : 'no'}`) }}</el-tag>
        </template>
      </vxe-column>
      <vxe-column
        :title="t('common.operate')"
        field="operator"
        align="center"
        fixed="right"
        width="140"
      >
        <template #default="{ row }">
          <el-button
            :disabled="row.differenceSelection === true && row.isWin === true"
            link
            type="primary"
            @click="handleDifferSetting(row)"
            >{{ t('instance.differenceSelection.operate.setResult') }}</el-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 导入差额评选名单 -->
    <DifferExcelImport
      v-if="awardsId"
      ref="importFormRef"
      :instanceId="awardsId"
      @success="getList"
    />

    <!-- 差额评选结果设置 -->
    <DifferenceConfirm ref="differenceConfirmRef" @success="getList" />
  </Dialog>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app'
import { FinalWinApi, FinalWinVO } from '@/api/awards/finalwin'
import type { VxeTableInstance, VxeTablePropTypes } from 'vxe-table'
import DifferExcelImport from './DifferExcelImport.vue'
import DifferenceConfirm from './DifferenceConfirm.vue'

defineOptions({ name: 'DifferenceSelection' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)
const checkBoxConfig = {
  checkMethod: ({ row }) => {
    return !Boolean(row.differenceSelection === true && row.isWin === true)
  },
  //开启保留翻页选中
  reserve: true
}

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 加载状态
const list = ref<FinalWinVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const selectList = ref<string[]>([])
const selectListObject = ref<FinalWinVO[]>([])

const tableRef = ref<VxeTableInstance>()

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  awardsId: undefined
})

const vxeTableConfig: VxeTablePropTypes.CustomConfig = {
  storage: true,
  mode: 'drawer',
  checkMethod({ column }) {
    return !['seq', 'operator'].includes(column.field)
  }
}

const collectSelect = () => {
  selectList.value = [
    ...(tableRef.value?.getCheckboxRecords() ?? []),
    ...(tableRef.value?.getCheckboxReserveRecords() ?? [])
  ].map((item) => item.id)
  selectListObject.value = [
    ...(tableRef.value?.getCheckboxRecords() ?? []),
    ...(tableRef.value?.getCheckboxReserveRecords() ?? [])
  ]
}

// 导入差额评选名单
const importFormRef = ref<InstanceType<typeof DifferExcelImport>>()
const handleImport = () => {
  importFormRef.value?.open()
}

// 差额评选结果设置
const differenceConfirmRef = ref<InstanceType<typeof DifferenceConfirm>>()
// 单个操作
const handleDifferSetting = (row: FinalWinVO) => {
  differenceConfirmRef.value?.open([row])
}

// 批量设置
const handleBatch = () => {
  if (selectList.value.length === 0) {
    message.warning(t('instance.differenceSelection.message.noSelect'))
    return
  }
  differenceConfirmRef.value?.open(selectListObject.value)
}

const getList = async () => {
  loading.value = true
  queryParams.awardsId = awardsId.value as any
  try {
    const data = await FinalWinApi.getFinalWinPageVo(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const awardsId = ref('')
const open = async (_awardsId: string) => {
  awardsId.value = _awardsId
  resetForm()
  dialogVisible.value = true
  getList()
}

const resetForm = () => {
  list.value = []
  total.value = 0
  queryParams.pageNo = 1
  queryParams.pageSize = 10
  queryParams.awardsId = undefined
}

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
